<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';
import { useBooleanStore } from '@/store';

const props = defineProps<{
  tableData: any;
}>();
const columns: any[] = [
  {
    title: '序号',
    dataIndex: 'id',
    slotName: 'id',
    width: 80,
    align: 'center',
  },
  {
    title: '条码',
    width: 200,
    dataIndex: 'barcode',
  },
  {
    title: '物料名称',
    width: 180,
    dataIndex: 'itemName',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '零件图号',
    dataIndex: 'itemCode',
    width: 180,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '成品型号',
    dataIndex: 'mProductNumber',
    width: 180,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '质量编号/成品件号',
    dataIndex: 'qualityCode',
    width: 180,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '数量',
    dataIndex: 'deliveryQty',
    width: 100,
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '机型',
    width: 120,
    dataIndex: 'productCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '批次',
    width: 120,
    dataIndex: 'batchNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '版本号',
    width: 120,
    ellipsis: true,
    tooltip: true,
    dataIndex: 'version',
  },
  {
    title: '工艺状态号',
    width: 120,
    ellipsis: true,
    tooltip: true,
    dataIndex: 'processStatusNo',
  },
  {
    title: '计量单位',
    width: 120,
    dataIndex: 'mdsUnit',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '物料大类',
    width: 140,
    dataIndex: 'itemType',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '移交人工号',
    width: 140,
    dataIndex: 'empName',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },

  {
    title: '移交时间',
    width: 180,
    dataIndex: 'deliveryDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '备注',
    width: 180,
    dataIndex: 'receiveRemark',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
];
const booleanStore = useBooleanStore();
const hStyle = ref({
  'background-color': booleanStore.color,
  'border-radius': booleanStore.borderRadius,
});

// 创建一个响应式的本地副本
const localTableData = ref<any[]>([]);
// 数据库一共有多少条
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(30);

// 监听props.tableData的变化，并更新本地副本
watch(
  () => props.tableData,
  () => {
    localTableData.value = props.tableData?.responseBody?.result || [];
    total.value = props.tableData?.responseBody?.pageParameter?.totalCount || 0;
  },
  { immediate: true }
);

function change(e: any) {
  pageNum.value = e;
}
function changeSize(e: any) {
  pageSize.value = e;
}
// 监听页面变化
watch([pageNum, pageSize], () => {
  booleanStore.setPage(pageNum.value, pageSize.value, 1);
});
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">已移交物料列表</div>
    </template>

    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      column-resizable
      :data="localTableData"
      :scroll="{ y: 500 }"
    >
      <template #id="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        :show-page-size="true"
        :page-size-options="[30, 50, 100, 500]"
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </a-card>
</template>

<style scoped>
.top-table {
  white-space: nowrap;
}
.page-position {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.font {
  font-size: 20px;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
